import Panel from "./../../elements/Panel";
import Header from "./../../components/Header";
import Modal from "./../../components/Modal/";
import {connect} from "react-redux";
import CONFIG from "./../../libs/config";
import {Lang, Fetch} from "./../../libs/";
import {URL, md5Url} from "./../../libs/Url";
import Label from "./../../components/FormLabel";
import FormGroup from "./../../components/FormGroup";
import FormItem from "./../../components/FormItem";
import Lesson from "./../../components/form/lesson";
import FormItemType from "./../../components/FormItemType";
import InputGroup from "./../../components/InputGroup";
import Selected from "./../../components/SelectItem";
import {Warn} from "./../../components/alert/";
import BreadcrumbNavigation from "./../../components/BreadcrumbNavigation";
import SingleSelectClass from "./../../components/form/single_select_class";
import {fetch, fetchUser} from "../../actions";
// import Fetch from "../../libs/fetch";
import {SUBJECT, PAGE_SUBJECT} from "./../../actions/subject";


const AddDayNews = React.createClass({
    getInitialState(){
        const self = this;
        this.isUpdate = this.props.router.params.id;

        this.form = [
            {
                name: 'classid',
                label: '班级名称',
                value: '',
                type: FormItemType.TEXT_SHOW,
            },
            {
                name: 'publisher',
                label: '提供者',
                required: true,
                value: '',
            },
            {
                name: 'comment',
                label: '内容',
                required: true,
                value: '',
                placeholder: '',
                type: FormItemType.TEXT_AREA,
                tips: '',
            },
            {
                name: 'fileid',
                label: '图片',
                value: '',
                placeholder: '',
                tips: '',
                type: FormItemType.UPLOAD,
            },
            // {
            //     name: 'publishdate',
            //     label: '发布日期',
            //     value: '',
            //     placeholder: '',
            //     required: true,
            //     tips: '',
            //     type: FormItemType.DATE,
            // },
        ];
        this.form.map((item, index)=> {
            if (FormItemType.TEXT_SHOW != item.type)
                item.onchange = (index, content) => {
                    self.setState({
                        form: [
                            ...self.state.form.slice(0, index),
                            Object.assign({}, self.state.form[index], {
                                value: content,
                                tips: content ? '' : '该项必填',
                            }),
                            ...self.state.form.slice(index + 1),
                        ]
                    });
                };
            return item;
        });
        return {
            classes: [],
            open: false,
            selected: '',
            pageState: false,
            form: this.isUpdate ? [] : this.form,
            tmpForm: [],//表单缓存变量
            tmp: {
                push_class: ''
            },
            tips: {}
        }
    },
    componentWillMount(){
        const self = this;
        if (this.isUpdate) {
            Fetch(URL.DAY_NEWS_GET,
                {
                    body: {
                        daytopicid: this.isUpdate
                    }
                })
                .then(res=> {
                    let daytopic = res.daytopic;
                    self.form.map((item, index)=> {
                        self.form[index].value = daytopic[item['name']];
                    });
                    console.log(self.form);
                    self.setState({
                        form: self.form
                    })
                })
                .catch(e=> {
                    console.log(e);
                })
        }
    },

    setchange(index, content){
        const self = this;
        self.setState({
            form: [
                ...self.state.form.slice(0, index),
                Object.assign({}, self.state.form[index], {
                    value: content,
                    tips: content.length ? '' : Lang.NEWS_CREATE.tip,
                }),
                ...self.state.form.slice(index + 1),
            ]
        })
    },
    componentDidMount() {
        const {dispatch} = this.props, self = this;
        Fetch(URL.Get_USER_CLASS)
            .then(res=> {
                self.setState({
                    classes: res.list
                });
                console.log(res)
            })
            .catch(e=> {
                console.log(e);
            })
    },
    componentWillReceiveProps(nextProps){

    },
    onsubmit(){
        var form = {}, self = this;
        self.state.form.forEach((item, index)=> {
            if (item.required && !item.value) {
                if (index == 4) {
                    form[item.name] = Moment().format('YYYY-MM-DD');
                } else {
                    self.setState({
                        form: [
                            ...self.state.form.slice(0, index),
                            Object.assign({}, self.state.form[index], {
                                tips: Lang.NEWS_CREATE.tip,
                            }),
                            ...self.state.form.slice(index + 1),
                        ]
                    })
                }
            } else {
                if (index == 4) {
                    form[item.name] = item.value.format('YYYY-MM-DD');
                } else {
                    form[item.name] = item.value;
                }
            }
        });

        form.classid = this.props.user.dutyClass.classid;
        if (this.isUpdate) {
            form.daytopicid = this.isUpdate;
        }
        if (Object.keys(form).length >= self.state.form.length) {
            Fetch(this.isUpdate ? URL.DAY_NEWS_MODIFY : URL.DAY_NEWS_ADD, {
                body: form
            })
                .then(res=> {
                    alert('成功!');
                    self.props.router.push(CONFIG.MENUS_ABSOLUTE.DAY_NEWS);
                })
                .catch(e=> {
                    alert('失败!');
                })
        }
    },
    render(){
        const self = this;
        const {user, dispatch}  = this.props;
        const class_ = this.state.classes[0] ? this.state.classes[0] : {};
        return (
            <div>
                <BreadcrumbNavigation navs={[
                    {url: CONFIG.MENUS_ABSOLUTE.HOME, label: Lang.menus.HOME},
                    {url: CONFIG.MENUS_ABSOLUTE.DAY_NEWS, label: Lang.menus.DAY_NEWS},
                    {label: this.isUpdate ? '更新' : '新建'},
                ]}>
                </BreadcrumbNavigation>
                <Panel>
                    <Header>{this.isUpdate ? '更新' : '新建'}每日一新</Header>

                    <div className="form-horizontal">
                        {
                            self.state.form.map((item, index)=> {
                                if (index == 0) {
                                    item.value = class_['class'] ? class_['class'].name : '';

                                }
                                return <FormItem index={index} {...item} key={index}></FormItem>
                            })
                        }
                        <FormGroup>
                            <Label></Label>
                            <InputGroup>
                                <button onClick={self.onsubmit}
                                        className={"btn btn-success " + (self.state.pageState ? 'btn-primary' : '')}
                                        type="submit">
                                    {self.state.pageState ? '编辑' : Lang.NEWS_CREATE.save}
                                </button>
                            </InputGroup>
                        </FormGroup>
                    </div>
                </Panel>
            </div>
        )
    }
});
function select(state) {
    return {
        user: state.user.user,
        [md5Url.DAY_NEWS]: state.fetchBySubject[md5Url.DAY_NEWS],
        [PAGE_SUBJECT.DAY_NEWS_ADD]: state.pageBySubject[PAGE_SUBJECT.DAY_NEWS_ADD]
    }
}
export default connect(select)(AddDayNews)